<template>
  <div class="student_wrapper">
    <div class="box">
      <!-- 学生list -->
      <div class="list_box">
        <p class="list_text">学生列表</p>
        <div v-for="student in studentLists" :key="student.id" class="list_ietm">
          <p class="student_list">{{student.name}} / {{student.no}} / {{student.sex}} / {{student.birthday}} / {{student.class}}</p>
          <button @click="editStudent(student)" class="handle_btn">编辑</button>
          <button @click="deleteStudent(student.no)" class="handle_btn">删除</button>
        </div>
      </div>
      <!-- 学生add -->
      <div>
        <div class="add_item">姓名：<input type="text" v-model="inputStudent.name" placeholder="请输入姓名"></div>
        <div class="add_item">学号：<input type="text" v-model="inputStudent.no" placeholder="请输入学号"></div>
        <div class="add_item">性别：<input type="text" v-model="inputStudent.sex" placeholder="请输入性别"></div>
        <div class="add_item">生日：<input type="text" v-model="inputStudent.birthday" placeholder="请输入生日"></div>
        <div class="add_item">班级：<input type="text" v-model="inputStudent.class" placeholder="请输入班级"></div>
        <div class="btn_box">
          <button @click="addStudent">add学生</button>
        </div>
      </div>
    </div>

     <!-- 学生编辑 -->
    <div v-if="editBox" class="edit_box">
      <p class="x" @click="hiddenEditBox">x</p>
      <div class="add_item">姓名：<input type="text" v-model="studentItem.name"></div>
      <div class="add_item">性别：<input type="text" v-model="studentItem.sex"></div>
      <div class="add_item">生日：<input type="text" v-model="studentItem.birthday"></div>
      <div class="add_item">班级：<input type="text" v-model="studentItem.class"></div>
      <div class="btn_box">
        <button @click="relEditStudent">edit学生</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      studentLists:[],
      inputStudent:{
        name:'',
        no:null,
        sex:'',
        birthday:'',
        class:''
      },
      studentItem:{
         name:'',
         no:null,
         sex:'',
         birthday:'',
         class:''
      },
      editBox:false,
    }
  },

  created(){
    this.getStudentList();
  },

  methods:{
  // 查看
    getStudentList:function(){
      this.$api.getStudentList().then(res => {
        if(res.data.code === 0){
          this.studentLists = res.data.data;
        }
      })
    },
  // 添加
    addStudent:function(){
      let params = this.inputStudent;
      this.$api.addStudent(params).then(res => {
        if(res.data.code ===0){
          this.inputStudent = {
            name:'',
            no:null,
            sex:'',
            birthday:'',
            class:''
          }
          this.getStudentList();
        }
      })
    },
  // 删除
    deleteStudent:function(no){
      let params = {
        no: no
      };
      this.$api.deleteStudent(params).then(res => {
        if(res.data.code === 0){
          this.getStudentList();
        }
      })
    },

  // 编辑
    editStudent:function(student){
      this.editBox = true;
      this.studentItem = {
         name:student.name,
         no:student.no,
         sex:student.sex,
         birthday:student.birthday,
         class:student.class
      }
    },

    relEditStudent:function(){
      this.$api.editStudent(this.studentItem).then(res => {
        if(res.data.code === 0){
          this.getStudentList();
          this.editBox = false;
        }
      })
    },

    hiddenEditBox:function(){
      this.editBox = false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.student_wrapper{
  display:flex;
  justify-content: center;
  align-items: center;
  height:100%;
  position:relative;
}

.box{
  display:flex;
  justify-content: center;
  background: rgb(245, 245, 238);
  box-shadow:0 0 8px #999;
  padding:4vh 6vw;
}

.list_box{
  margin-right:10vw;
}

.list_text{
  font-size:20px;
  font-weight:600;
}

.list_ietm{
  margin:10px 0;
}

.student_list{
  width:460px;
  display:inline-block;
}

.handle_btn{
  margin:0 4px;
}

.add_item{
  margin:3vh 2vw;
}

.btn_box{
  display:flex;
  justify-content: center;
  margin-top:8vh;
}

.edit_box{
  box-shadow:0 0 10px #333;
  padding:38px;
  position: absolute;
  background:rgb(250, 247, 247);
  left:50%;
  top:30%;
  transform: translateX(-50%);
}

.x{
   position: absolute;
   top:-9px;
   right:-9px;
   width:20px;
   height:20px;
   border-radius:50%;
   background: rgb(141, 136, 137);
   color:#fff;
   line-height:20px;
   text-align:center;
   cursor:pointer;
}
</style>
